<template>
  <view class="content" :style="{ background: finish ? '#ebebeb' : rescue ? '#fcdede' : '#d7eeff' }">
    <view class="date" @click="nfcToPage" v-if="!date.finish">{{
      date.planDate || "2022-03-04"
    }}</view>
  
    <!-- 这里是未完成列表 -->
    <block>
      <view class="card-content" v-for="(item, index) in date.maintainPlanContentListVos" :key="index">
      <view class="buildding-info">
        <!-- 小区列表 -->
        <view>
          <view class="buildDingList">
            <!-- 左边 -->
            <view class="buildDingList_left">
              <image src="/static/images/index/build.svg" mode=""></image>
              <view class="buildingName" @click="toBuilddingDetail(item)">
                <view class="nameItem">
                  {{ item.buildingName }}
                  <!-- {{ item.buildingName.substring(0, item.buildingName.length - 3) }} -->
                  <text>{{ item.list.length }}</text>
                </view>
                <view class="address" @click.stop="petName(item)"
                  v-if="item.aliasStr">
                  <view class="buildings">项目别名:{{ item.aliasStr || "" }}</view>
                  <view class="arrowup">
                    <uni-icons :type="popupShow ? 'arrowup' : 'arrowdown'" size="14" color="#999;"></uni-icons>
                  </view>
                </view>
                <view class="address">{{ item.buildingAddress }}</view>
              </view>
              <!-- 右边 -->
            </view>
            <view class="buildDingList_right" @click.stop="toAddress(item)">
              <image src="@/static/images/locations.png" mode=""></image>
              <text >导航</text>
              <text v-if="item.kmDesc">{{ item.kmDesc }}</text>
            </view>
          </view>

          <view class="showmore" @click="showProject(date.planDate, date.finish, item)">
            <view class="line"></view>

            <view class="text" v-if="!isExpand(date.finish, date.planDate, item.buildingId)">展开项目</view>
            <image class="fold" src="@/static/images/index/fold.svg" mode="" v-else></image>
          </view>

          <!-- 电梯列表 -->
          <view class="elevtorList" v-if="isExpand(date.finish, date.planDate, item.buildingId)">
            <elevator v-for="(e, idx) in item.list" :elevator="{ ...e, date: date.planDate, index: idx }" :key="idx"
              @update="$emit('update')"></elevator>
          </view>
          <!-- 电梯列表end -->
        </view>
        <!-- 小区列表end -->
      </view>
    </view>
    </block>

  </view>
</template>

<script>
import { timeDiffFn, getNowTime, valueInArr } from '@/utils/utils.js';
// import unipopup from '@/components/uni-popup/uni-popup.vue';
import elevator from './elevator.vue';
import { mapState, mapActions } from 'vuex';
// import { formatTime, getWeekDate, getMonthDate } from '@/utils/utils.js';
export default {
	components: {
		elevator,
	},
	props: {
		date: {
			type: Object,
			default() {
				return {
					id: 1,
					list: [{}, {}],
					name: '郎情假日',
					showList: true,
				};
			},
		},
		rescue: Boolean,
		finish: {
			type: Boolean,
		},
		popupShow: {
			type: Boolean,
			default: false,
		},
	},

	data() {
		return {
			openList: [],
		};
	},
	computed: {
		...mapState('user', ['userinfo']),
	},
	watch: {},
	created() {
		// console.log(this.date,2222);
	},
	methods: {
		getNowTime: getNowTime,
		signMember: valueInArr,
		toBuilddingDetail(item) {
			// console.log(item)s
			uni.navigateTo({
				url: '/pageModules/projectInfo/detail?id=' + item.buildingId,
			});
		},
		cutLenght(val) {
			if (val.length > 15) {
				return val.substring(0, 15) + '...';
			}
			return val;
		},
		getAliasStr(str) {
			if (!str) {
				return '';
			}
			if (str.length > 20) {
				return '(项目别名：' + str.slice(0, 20) + '...)';
			} else {
				return '(项目别名：' + str + ')';
			}
		},

		// 导航
		toAddress(item) {
			const { latitude, longitude, buildingName, aliasStr, buildingAddress } = item;

			uni.openLocation({
				latitude: Number(latitude),
				longitude: Number(longitude),
				name: buildingName + this.getAliasStr(aliasStr),
				scale: 18,
				address: buildingAddress,
			});
		},
		showProject(date, finish, res) {
			// 如果已完成
			let dateId = '';
			if (finish) {
				dateId = res.buildingId;
			} else {
				dateId = date.substring(0, 10) + res.buildingId;
			}
			if (!this.openList.includes(dateId)) {
				this.openList.push(dateId);
			} else {
				let index = this.openList.findIndex((item) => item === dateId);
				this.openList.splice(index, 1);
			}
		},
		
		// 判断是否展开项目
		isExpand(finish, target, id) {
			if (finish) {
				// 如果是已完成
				return !this.openList.includes(id) ? true : false;
			} else {
				return !this.openList.includes(target.substring(0, 10) + id)
					? true
					: false;
			}
		},
		nfcToPage() {
			console.log('vueee');
			// 跳往考勤统计
			// uni.navigateTo({
			// 	url: '/pageModules/signPage/statisticalTotal',
			// });
			// uni.navigateTo({
			// 	url: '/pages/index/nfcCode'
			// });
		},
		petName(obj) {
			// eslint-disable-next-line vue/custom-event-name-casing
			this.$emit('petName', obj);
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
  margin-bottom: 16rpx;
  background-color: #d7eeff;
  padding-bottom: 8rpx;
  border-radius: 8rpx;
}

.date {
  height: 77rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  padding-left: 24rpx;
}

.card-content {
  margin: 0 8rpx;
  padding: 0 20rpx;
  background-color: #fff;
  border-radius: 8rpx;
  margin-bottom: 8rpx;
  position: relative;
  border-top: 2rpx solid #eee;

  .buildding-info {
    padding: 28rpx 0;

    .buildDingList {
      position: relative;
      display: flex;
      // padding-bottom: 20rpx;
      align-items: center;

      .buildingName {
        font-weight: bold;
        font-size: 28rpx;
        color: #333;
        width: 500rpx;

        text {
          font-size: 24rpx;
          margin-left: 4rpx;
          background: #e9e9e9;
          border-radius: 50%;
          width: 28rpx;
          height: 28rpx;
          font-weight: normal;
          display: inline-block;
          text-align: center;
          line-height: 28rpx;
        }
      }

      .buildDingList_left {
        display: flex;
        flex: 1;

        image {
          margin-right: 10rpx;
          width: 48rpx;height:48rpx
        }

        .name {
          font-weight: bold;
          font-size: 28rpx;
          color: #333;
        }

        .address {
          font-size: 24rpx;
          color: #999;
          font-weight: normal;
          display: flex; align-items: center
        }

        .buildings {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          max-width: 500rpx;
          font-size: 20rpx;
          color: #666;
        }
      }

      .buildDingList_right {
        width: 120rpx;
        // display: flex;
        // align-items: center;
        font-size: 24rpx;
        color: #999;
        text-align: right;
        text{
          color:#666
        }

        // justify-content: flex-end;
        image {
          width: 32rpx;
          height: 32rpx;
          vertical-align: middle;
        }

        text:nth-of-type(1) {
          vertical-align: middle;
        }

        text:nth-of-type(2) {
          display: block;
          margin-left: 8rpx;
        }
      }

      image {
        width: 48rpx;
        height: 48rpx;
      }
    }

    .showProject {
      position: absolute;
      bottom: 0;
    }

    .fold {
      // position: absolute;
      width: 40rpx;
      // width: 100%;
      height: 18rpx;
      padding: 0 20rpx;
      background-color: #fff;
      // left: calc(50% - 30rpx - 30rpx);
      text-align: center;
      // bottom: -28rpx;
      bottom: 2px;
      z-index: 5;
      transition: 0.3s all;
    }
  }

  .plans {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 35rpx 0;
    border-top: 2rpx solid #eeeeee;

    &-content {
      .progress {
        color: #16bf99;
      }

      .beStart {
        color: #0091ff;
      }

      width: 100%;

      .menberName {
        display: flex;
        align-items: center;

        .menber {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 20rpx;
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
          background-color: #0091ff;
          color: #fff;
          margin-left: 4rpx;
        }

        :nth-child(2n) {
          // background-color: #00c6c0;
        }

        .finish {
          background: #b9b9b9 !important;
        }
      }

      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .handle {
          display: flex;
          align-items: center;
          padding: 0 20rpx;
        }
      }

      .name {
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;

        .tag {
          font-size: 24rpx;
          padding: 0rpx 9rpx;
          font-weight: normal;
          margin-left: 12rpx;
          border-radius: 4rpx;
          line-height: 32rpx;
          white-space: nowrap;
          margin-bottom: 2rpx;
        }
      }

      .detail {
        width: 530rpx;
        font-size: 26rpx;
        color: #666666;
        padding: 14rpx 0;
        display: flex;

        .label {
          width: 80rpx;
          display: flex;
          align-items: center;
        }

        .telName {
          display: flex;
          flex-wrap: wrap;

          view {
            font-size: 24rpx;
            border: 2rpx solid #cccccc;
            border-radius: 20rpx;
            margin: 0 12rpx;
            padding: 2rpx 8rpx;
            margin-top: 6rpx;
          }
        }

        image {
          width: 32rpx;
          height: 32rpx;
        }
      }

      .detail_bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &_left {
          display: flex;
          font-size: 26rpx;
          align-items: center;

          .status {
            color: #16bf99;
          }

          .error {
            margin-left: 12rpx;
            padding: 4rpx 8rpx;
            font-size: 24rpx;
            color: #e02020;
            background: #ffe3e3;
            border-radius: 4rpx;
          }
        }
      }

      .time {
        font-size: 24rpx;
        font-weight: 400;
        text-align: left;
        color: #999999;
        line-height: 34rpx;
      }
    }
  }
}

.plan-more{
  width: 100%;
  text-align: center;
  font-size: 28rpx;
}
.showmore {
  width: 100%;
  text-align: center;
  font-size: 24rpx;
  color: #999999;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 30rpx;
  padding-top: 20rpx;

  .line {
    width: 100%;
    height: 2rpx;
    background: #eeeeee;
    position: absolute;
    left: 0;
    top: calc(50% - 15rpx);
  }

  .text {
    background-color: #fff;
    padding: 0 20rpx;
    z-index: 9;
  }
}

.red {
  color: #e02020;
  border: 1rpx solid #e02020;
}

.green {
  color: #6dd400;
  border: 1rpx solid #6dd400;
}

.yellow {
  color: #f7b500;
  border: 1rpx solid #f7b500;
}

.org {
  color: #fa6400;
  border: 1rpx solid #fa6400;
}

.buildAddress {
  left: 58rpx;
  font-size: 24rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  text-align: left;
  color: #999999;
}

.popup {
  height: 368rpx;
  width: 506rpx;
  background-color: #fff;
  border-radius: 16rpx;
}
</style>
